<template>
    <div>
        <div class="topicm">
            <span class="csssf">单选</span>
            <span>{{subjectIndex+1}}、<span v-html="topicm"></span></span>
        </div>
        <div class="option">
            <van-radio-group :value="radio">
                <van-radio v-for="(item,index) in option"
                           :name="item.id"
                           icon-size="20px"
                           @click="opt(index)"
                           checked-color="#07c160">
                    <p class="fasdf">{{arr[index]}}、<span v-html="item.content"></span></p>
                </van-radio>
            </van-radio-group>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Topics",
        props: {
            topicm: {
                default: '',
                type: String
            },
            option: {
                default: [],
                type: Array
            }
        },
        computed: {
            //当前题目的位置
            subjectIndex() {
                return this.$store.state.topic.subjectIndex
            },
            //被选中状态
            radio() {
                return this.$store.state.topic.radio
            }
        },
        data() {
            return {
                arr: ["A", "B", "C", "D"]
            }
        },
        methods: {
            opt(index) {
                this.$store.commit('optck', index + 1)
            }
        },
        beforeDestroy() {
              this.$store.commit('kong')
        }
    }
</script>

<style lang="scss">
    .fasdf {
        display: flex;
    }

    .topicm {
        width: 95%;
        margin: 10px auto;

        .csssf {
            font-size: 20px;
            padding: 5px 10px;
            border-radius: 10px 0 10px 0;
            background-color: #0097FA;
            color: #fff;
            margin-right: 10px;
        }

        span {
            &:nth-child(1) {
                font-size: 25px;
                padding: 5px 10px;
                border-radius: 10px 0 10px 0;
                margin-right: 10px;
            }

            p {
                display: inline-block;
            }
        }

    }

    .option {
        width: 90%;
        margin: 0 auto;

        .van-radio {
            margin: 10px 0;
            padding: 5px 0;

            .van-radio__label {
                margin-top: 10px;
            }
        }

        .van-radio-group {
            font-size: 24px;
        }
    }
</style>